<template>
  <view class="login">
    <!-- #ifdef MP-WEIXIN -->
    <u-navbar title="用户登陆" bgColor="#fff" @leftClick="backHome" :placeholder="true" :autoBack="true"></u-navbar>
    <!-- #endif -->
    <view class="content" v-show="loading">
      <!-- 头部logo -->
      <view class="header">
        <image :src="logoImage"></image>
      </view>
      <!-- 主体表单 -->
      <view class="main">
        <view class="loginset padding">
          <text class="padding-bottom-sm" :class="tab == 1 ? 'cur' : ''" @tap="setlogin" data-id="1">账号密码登陆</text>
          <text class="padding-bottom-sm" :class="tab == 2 ? 'cur' : ''" @tap="setlogin" data-id="2">手机验证码登陆</text>
        </view>
        <wInput type="number" maxlength="11" placeholder="用户名/电话" :focus="isFocus" data-type="phoneData" :value="phoneData" @input="getVal($event, 'phoneData')"></wInput>
        <wInput :value="passData" @input="getVal($event, 'passData')" type="password" maxlength="11" placeholder="密码" v-if="tab == 1"></wInput>
        <wInput
          :value="verCode"
          @input="getVal($event, 'verCode')"
          type="number"
          maxlength="6"
          placeholder="验证码"
          isShowCode
          codeText="获取验证码"
          setTime="120"
          ref="runCode"
          @setCode="getVerCode()"
          v-else
        ></wInput>
      </view>
      <view class="flex flex-center">
        <wButton class="margin-top-lg" text="登 录" :rotate="isRotate" bgColor="linear-gradient(to right, #0081ff, #4096f3)" @click="startLogin"></wButton>
      </view>
      <!-- #ifdef APP -->
      <wButton class="margin-top-lg" text="微信登陆" bgColor="linear-gradient(to right, #39b54a, #8dc63f)" @click="login_weixin"></wButton>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <!-- <wButton @click="weixina" class="margin-top-lg" text="微信登陆" bgColor="linear-gradient(to right, #39b54a, #8dc63f)"></wButton> -->
      <button class="dlbutton" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登录</button>
      <!-- #endif -->
      <!-- 底部信息 -->
      <view class="footer">
        <navigator url="forget" open-type="navigate">找回密码</navigator>
        <text>|</text>
        <navigator url="register" open-type="navigate">注册账号</navigator>
      </view>
      <!-- 底部信息 -->
      <view class="footer margin-bottom-sm">
        <text @tap="isShowAgree" class="cuIcon" style="font-size: 14px; margin-right: 0" :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">请阅读并同意</text>
        <!-- 协议地址 -->
        <text @tap="gouto" data-url="../index/agree?id=18" class="text-cyan">《{{ app.title }}用户协议》</text>
        与
        <text @tap="gouto" data-url="../index/agree?id=19" class="text-cyan">《{{ app.title }}隐私协议》</text>
      </view>
    </view>
    <!-- #ifdef APP -->
    <!--    <u-popup z-index="99999999" :show="isshowa" round="10" mode="center">
      <view class="xieyi">
        <view class="propd">用户协议与隐私政策</view>
        <view class="">(1)《隐私协议》中关于个人设备用户信息的收集和使用说明。</view>
        <view class="">(2)《隐私协议》中与第三方SDK类服务商数据共享，相关信息收集和使用说明。</view>
        <view style="margin-bottom: 30rpx">用户隐私和协议政策说明：</view>
        <view class="colore">
          阅读完整的
          <text @tap="gouto" data-url="../index/agree?id=18" class="text-cyan">《用户服务协议》</text>
          和
          <text @tap="gouto" data-url="../index/agree?id=19" class="text-cyan">《隐私协议》</text>
          了解详细内容。
        </view>
        <view class="bunntnab">
          <view @click="isshowa = false" style="text-align: center" class="">不同意</view>
          <view @click="tongyi" class="text-cyan">同意并继续</view>
        </view>
      </view>
    </u-popup> -->
    <!-- #endif -->
  </view>
</template>
<script>
let _this;
import wInput from '../../components/watch-login/watch-input.vue'; //input
import wButton from '../../components/watch-login/watch-button.vue'; //button
import md5 from 'js-md5';
export default {
  data() {
    return {
      isshowa: true,
      //logo图片 base64
      logoImage: '',
      barHeight: 0,
      phoneData: '', //用户/电话
      passData: '', //密码
      isRotate: false, //是否加载旋转
      isFocus: true, // 是否聚焦
      tab: 1,
      verCode: '', //验证码
      showAgree: false, //协议是否选择
      isfa: true,
      loading: false,
      qrcode: null,
      app: this.app,
      sessionId: '',
      //
      mobile: '13273015921',
      timestamp: '1278546921',
      assets: ''
    };
  },
  components: {
    wInput,
    wButton
  },
  onLoad(ops) {
    if (ops.qrcode != '' && ops.qrcode != null && ops.qrcode != undefined) {
      this.qrcode = ops.qrcode;
    }
    this.barHeight = uni.getSystemInfoSync().statusBarHeight;
  },
  onShow() {
    uni.removeStorageSync('users');
    uni.removeStorageSync('clearStorageSync');
  },
  mounted() {
    // #ifdef APP
    this.phoneLogin(); //调用一键登录
    // #endif
    uni.showLoading();
    _this = this;
    _this.geconfig();
    // this.isLogin();
  },
  methods: {
    // app端同意协议
    tongyi() {
      (this.isshowa = false), //关闭弹窗
        (this.showAgree = true); //同意协议
    },
    //小程序微信登录
    onGetPhoneNumber(e) {
      if (!this.showAgree) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '请阅读并同意用户与隐私协议'
        });
        return;
      }
      var that = this;
      //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
      uni.login({
        provider: 'weixin',
        onlyAuthorize: true, // 微信登录仅请求授权认证
        success: async function (event) {
          // 显示加载中提示
          uni.showLoading({
            title: '登录中...',
            mask: true // 显示遮罩层，防止用户进行其他操作
          });
          const { code } = event;
          console.log(777, code);
          //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
          uni.request({
            url: _this.app.apiHost + '/getSessionId',
            header: { Authorization: '', platform: 'miniProgram' },
            method: 'POST',
            data: {
              payload: encodeURIComponent(JSON.stringify({ code: code }))
            },
            success: (res) => {
              const aaaa = encodeURIComponent(JSON.stringify({ sessionId: res.data.data.session_id, iv: e.target.iv, encryptedData: e.target.encryptedData, code: code }));
              _this.sessionId = res.data.data.session_id;
              uni.request({
                url: _this.app.apiHost + '/mobileLogin',
                method: 'POST',
                data: {
                  payload: encodeURIComponent(JSON.stringify({ sessionId: res.data.data.session_id, iv: e.target.iv, encryptedData: e.target.encryptedData, code: code }))
                },
                header: { Authorization: '', platform: 'miniProgram' },
                success: (ree) => {
                  if (ree.data.code == '0') {
                    _this.app.showMsg(ree.data.msg);
                  }
                  console.log('sessionId不存在', ree);
                  uni.hideLoading(); // 登录成功，隐藏加载中提示
                  _this.app.showMsg(ree.data.msg, '../index/index');
                  _this.app.setAuthCode(ree.data.data.token); //登录成功把token存本地
                  uni.setStorageSync('user', ree.data.data.user);
                  setTimeout(() => {
                    uni.switchTab({
                      url: '/pages/index/index'
                    });
                  }, 1000);
                },
                fail(err) {
                  console.log(2222, err);
                }
              });
            },
            fail(err) {
              uni.hideLoading(); // 登录成功，隐藏加载中提示
              _this.app.showMsg('登陆失败');
            }
          });
        },
        fail() {
          _this.app.showMsg('登陆失败');
        }
      });
    },
    getVal(e, type) {
      console.log(e, type);
      this.$data[type] = e;
    },
    backHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    gouto(e) {
      let url = e.target.dataset.url;
      uni.navigateTo({
        url: url
      });
    },
    geconfig() {
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/getlogo',
        header: { Authorization: '' },
        success: (data) => {
          if (data.data.code == 0) {
            let da = data.data.data;
            _this.logoImage = da.murl + da.logo;
            uni.hideLoading();
            _this.loading = true;
          }
        }
      });
    },
    setlogin(e) {
      let ta = e.currentTarget.dataset.id;
      this.tab = ta;
    },
    isShowAgree() {
      //是否选择协议
      _this.showAgree = !_this.showAgree;
    },
    backone() {
      uni.navigateBack({
        delta: 1
      });
    },
    gohome() {
      uni.switchTab({
        url: '../index/index'
      });
    },
    isLogin() {
      //判断缓存中是否登录过，直接登录
      try {
        uni.request({
          method: 'post',
          url: _this.app.apiHost + '/islogin',
          header: { Authorization: 'bearer ' + _this.app.getAuthCode() },
          success: (data) => {
            console.log(data);
            if (data.data.code == 0) {
              _this.app.showMsg('已登陆', '../index/index');
              uni.switchTab({
                url: '/pages/index/index'
              });
            } else if (data.data.code == -1) {
              // #ifdef H5
              if (_this.isweixin() == true) {
                _this.app.islogin(_this.qrcode);
              }
              // #endif
            }
          },
          fail(a) {
            uni.showToast({
              title: '链接失败',
              position: 'bottom',
              icon: 'error'
            });
          }
        });
      } catch (e) {}
    },
    startLogin(e) {
      if (!this.showAgree) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '请阅读并同意用户与隐私协议'
        });
        return;
      }
      //登录
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      if (this.phoneData.length == '') {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '用户名不能为空'
        });
        return;
      }
      if (this.tab == 1) {
        if (this.passData.length < 5) {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: '密码不正确'
          });
          return;
        }
      } else {
        if (this.verCode.length != 6) {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: '请输入正确的验证码'
          });
          return;
        }
      }
      _this.isRotate = true;
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/login',
        header: { Authorization: '' },
        data: { username: _this.phoneData, password: _this.passData, type: _this.tab, yzm: _this.verCode },
        success: (data) => {
          console.log(data);
          if (data.data.code == 1) {
            _this.app.setAuthCode(data.data.data.token);
            uni.setStorageSync('users', JSON.stringify(data.data.data.user));
            _this.app.showMsg('登陆成功', '../index/index');
            uni.switchTab({
              url: '/pages/index/index'
            });
          } else {
            _this.isRotate = false;
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          }
        },
        fail(a) {
          _this.isRotate = false;
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    },
    getVerCode() {
      //获取验证码
      if (_this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确'
        });
        return false;
      }
      if (this.isfa == false) return;
      console.log('获取验证码');
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/sendGetCode',
        header: { Authorization: '' },
        data: { phone: _this.phoneData },
        success: (data) => {
          _this.isfa = true;
          console.log(data);
          if (data.data.code == 0) {
            _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
            _this.app.showMsg('发送成功');
          } else if (data.data.code == 2) {
            _this.$refs.runCode.$emit('runCode', parseInt(data.data.time));
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          } else {
            _this.$refs.runCode.$emit('runCode', 0);
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          }
        },
        fail(a) {
          _this.$refs.runCode.$emit('runCode', 0);
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    },
    //微信登录
    // login_weixin() {
    //   uni.navigateTo({
    //     url: 'weixinlogin'
    //   });
    // },
    // app微信登录
    login_weixin() {
      if (!this.showAgree) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '请阅读并同意用户与隐私协议'
        });
        return;
      }
      var weixinOauth = null;
      plus.oauth.getServices(
        function (services) {
          for (var i in services) {
            var service = services[i];
            // 获取微信登录对象
            if (service.id == 'weixin') {
              weixinOauth = service;
              break;
            }
          }
          weixinOauth.authorize(
            function (event) {
              const { code } = event;
              console.log(event);
              //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
              uni.request({
                url: _this.app.apiHost + '/third_wechat_login',
                method: 'POST',
                data: {
                  payload: JSON.stringify({ code: code })
                },
                header: { Authorization: '', platform: 'openPlatform' },
                success: (res) => {
                  _this.app.appToken = res.data.data.token; //把token放到公共变量里
                  if (res.data.code == 1) {
                    if (res.data.data.user.mobile) {
                      _this.app.setAuthCode(res.data.data.token); //登录成功把token存本地
                      _this.app.showMsg(res.data.msg, '../index/index');
                      uni.setStorageSync('user', res.data.data.user);
                      setTimeout(() => {
                        uni.switchTab({
                          url: '/pages/index/index'
                        });
                      }, 1000);
                      console.log('有手机号');
                    } else {
                      uni.navigateTo({
                        url: '/pages/login/binduser'
                      });
                      console.log('没有手机号');
                    }
                  } else {
                    _this.app.showMsg(res.data.msg);
                  }
                }
              });
            },
            function (err) {
              // 登录授权失败
              // err.code是错误码
            }
          );
        },
        function (err) {
          // 获取 services 失败
        }
      );
    },
    login_weibo() {
      //微博登录
      uni.showToast({
        icon: 'none',
        position: 'bottom',
        title: '...'
      });
    },
    login_github() {
      //github登录
      uni.showToast({
        icon: 'none',
        position: 'bottom',
        title: '...'
      });
    },
    isweixin() {
      let userAgent = navigator.userAgent;
      if (userAgent.includes('MicroMessenger')) {
        return true;
      } else {
        return false;
      }
    },
    phoneLogin() {
      var that = this;
      console.log(78978997);
      uni.preLogin({
        provider: 'univerify',
        success(res) {
          //预登录成功
          // 显示一键登录选项
          console.log('预登录成功');
          uni.hideKeyboard(); //隐藏键盘
          uni.login({
            provider: 'univerify',
            univerifyStyle: {
              // 自定义登录框样式
              //参考`univerifyStyle 数据结构`
              fullScreen: true, // 是否全屏显示，默认值： false
              title: '快速登录',
              backgroundColor: '#ffffff', // 授权页面背景颜色，默认值：#ffffff
              icon: {
                path: 'static/zsk.png', // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
                width: '60px', //图标宽度 默认值：60px
                height: '60px' //图标高度 默认值：60px
              },
              phoneNum: {
                color: '#000000', // 手机号文字颜色 默认值：#000000
                fontSize: '18' // 手机号字体大小 默认值：18
              },
              slogan: {
                color: '#8a8b90', //  slogan 字体颜色 默认值：#8a8b90
                fontSize: '12' // slogan 字体大小 默认值：12
              },
              // 一键登录
              authButton: {
                normalColor: '#3479f5', // 授权按钮正常状态背景颜色 默认值：#3479f5
                highlightColor: '#2861c5', // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
                disabledColor: '#73aaf5', // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
                textColor: '#ffffff', // 授权按钮文字颜色 默认值：#ffffff
                title: '本机号码一键登录' // 授权按钮文案 默认值：“本机号码一键登录”
              },
              // 其他登录方式
              otherLoginButton: {
                visible: 'true', // 是否显示其他登录按钮，默认值：true
                normalColor: '#f8f8f8', // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
                highlightColor: '#dedede', // 其他登录按钮按下状态背景颜色 默认值：#dedede
                textColor: '#000000', // 其他登录按钮文字颜色 默认值：#000000
                title: '其他登录方式', // 其他登录方式按钮文字 默认值：“其他登录方式”
                borderWidth: '1px', // 边框宽度 默认值：1px（仅ios支持）
                borderColor: '#c5c5c5' //边框颜色 默认值： #c5c5c5（仅ios支持）
              },
              // 自定义按钮登录方式
              privacyTerms: {
                defaultCheckBoxState: 'false', // 条款勾选框初始状态 默认值： true
                textColor: '#8a8b90', // 文字颜色 默认值：#8a8b90
                termsColor: '#1d4788', //  协议文字颜色 默认值： #1d4788
                prefix: '我已阅读并同意', // 条款前的文案 默认值：“我已阅读并同意”
                suffix: '并使用本机号码登录', // 条款后的文案 默认值：“并使用本机号码登录”
                fontSize: '12', // 字体大小 默认值：12,
                privacyItems: [
                  // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
                  {
                    url: 'https://', // 点击跳转的协议详情页面
                    title: '用户服务协议' // 协议名称
                  }
                ]
              }
            },
            success(res) {
              // 登录成功
              console.log(res);
              let openid = res.authResult.openid; //拿到openid
              let access_token = res.authResult.access_token; //拿到access_token
              // 在得到access_token和openid后，通过callfunction调用云函数
              uniCloud
                .callFunction({
                  name: 'getPhoneNumber',
                  data: {
                    openid: openid,
                    access_token: access_token
                  }
                })
                .then((res1) => {
                  uni.hideKeyboard(); //隐藏键盘
                  let phoneNumber = res1.result.phoneNumber; // 获取用户的手机号
                  let timestampInSeconds = Math.floor(Date.now() / 1000); //当前时间戳
                  let assets = that.app.assets; //推广id
                  const params = `mobile=${phoneNumber}&timestamp=${timestampInSeconds}&assets=${assets}`;
                  const md5Hash = md5(params);
                  const jiami = md5Hash + 'AqEVtIfhsDpilycv';
                  const jiamiyan = md5(jiami); //数据签名
                  uni.request({
                    method: 'post',
                    url: that.app.apiHost + '/oneClickLogin',
                    header: {
                      Authorization: ''
                    },
                    data: {
                      sign: jiamiyan,
                      mobile: phoneNumber,
                      timestamp: timestampInSeconds,
                      assets: assets
                    },
                    success: (res) => {
                      if (res.data.code == 1) {
                        _this.app.showMsg(res.data.msg, '../index/index');
                        _this.app.setAuthCode(res.data.data.token); //登录成功把token存本地
                        uni.setStorageSync('user', res.data.data.user);
                        uni.closeAuthView(); //关闭一键登录界面
                        setTimeout(() => {
                          uni.switchTab({
                            url: '/pages/index/index'
                          });
                        }, 1000);
                      } else {
                        _this.app.showMsg(res.data.msg);
                        uni.closeAuthView(); //关闭一键登录界面
                      }
                    }
                  });
                })
                .catch((err) => {
                  console.log(2222, err);
                  _this.app.showMsg(err);
                  uni.closeAuthView(); //关闭一键登录界面
                  // 执行失败后的操作
                  //...
                  //...
                });
            },
            // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
            // 判断返回数据执行任意逻辑
            fail(res) {
              if (res.code == '30002') {
                // 用户点击了其他登录方式
                console.log('账号密码登录');
                return uni.closeAuthView(); //关闭一键登录界面
              } else if (res.code == '30005') {
                uni.closeAuthView(); //关闭一键登录界面
                // 不具备一键登录的使用前提 ，设备不支持/未开启数据流量/其他原因
                _this.app.showMsg('不具备一键登录');
              }
            }
          });
        },
        fail(err) {
          console.log(444, err);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.bunntnab {
  align-items: center;
  justify-content: space-around;
  display: flex;
  margin-top: 30rpx;
}
.colore {
  color: #999;
}
.propd {
  margin-bottom: 30rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
}
.xieyi {
  padding: 30rpx;
}
::v-deep .u-popup__content {
  margin: 0 40rpx;
  // margin-top: 50%;
}
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');
/deep/.u-navbar__content__title {
  color: #000 !important;
}
.dfan {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  border: 1px solid #c1c1c1;
  padding: 3px 5px;
}
.loginset {
}
.loginset text {
  width: 50%;
  display: inline-block;
  text-align: center;
}
.loginset .cur {
  border-bottom: #1387fc 2px solid;
}
.dlbutton {
  margin-top: 40upx !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 30rpx;
  white-space: nowrap;
  overflow: hidden;
  width: 601rpx;
  height: 100rpx;
  background: linear-gradient(to right, rgb(118, 193, 66), rgb(118, 193, 66));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
  border-radius: 2.5rem;
  margin-top: 0rpx;
}
</style>
